<template>
  <view class="curriculum" v-if="props.screenVal === 0">
    <view class="curriculum-item" v-for="item in ajax.list" :key="item.id">
      <fTraineeCard :data="item"></fTraineeCard>
    </view>
    <view v-if="ajax.list.length === 0" class="empty">
      <view class="empty-text">还没有收藏的课程</view>
    </view>
  </view>
  <view class="list" v-if="props.screenVal === 1">
    <view class="list-item" v-for="item in ajax.list" :key="item.id" v-if="props.screenVal === 1">
      <view class="list-item-lesson">
        <view class="list-item-lesson-title">
          <view class="list-item-lesson-text">{{ item.lesson?.name }}</view>
          <view class="list-item-lesson-grade">
            {{ item.lesson?.gradeDesc || '无' }}
          </view>
        </view>
        <view class="list-item-lesson-info"> 老师：{{ item.lesson?.teacher?.username }} </view>
        <view class="list-item-lesson-info" v-if="item.lesson?.merchant && item.lesson?.merchant?.id">
          地址：{{ item.lesson?.merchant?.headquater?.name }}&nbsp;({{ item.lesson?.merchant?.name }})
        </view>
        <view class="list-item-lesson-info" v-else>地址：无</view>
      </view>
      <view class="list-item-time">
        <view class="list-item-time-data">
          {{ getWeek(item.issueDate) }}
          {{ item.timeDuration }}
        </view>
        <view class="list-item-time-begin" v-if="getTimeStatus(item.issueDate) == 'future'"> 课程未开启 </view>
      </view>
    </view>
    <view v-if="ajax.list.length === 0" class="empty">
      <view class="empty-text">还没有收藏的课程</view>
    </view>
  </view>
</template>

<script setup>
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import fTraineeCard from './f-trainee-card.vue';
  import { ref, reactive, defineProps, watch, defineEmits, defineExpose } from 'vue';
  import weekday from '@/common/js/weekday.js';
  import { getWeek } from '@/common/js/fn.js';
  dayjs.extend(weekday);

  let ajax = reactive({
    list: []
  });
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Lesson',
    sort: 0
  });

  let props = defineProps({
    current: {
      type: Number,
      default: 0
    },
    screenVal: {
      type: Number,
      default: 0
    }
  });
  const httpMineLessons = async (reset = false) => {
    let options = JSON.parse(JSON.stringify(params));
    options.orderBy = ['Lesson', params.sort ? 'asc' : 'desc'];
    let data = await uni.$uv.http.post('/app/collect/lessons', options);
    let list = data.lessons.map(r => {
      let timeDuration = r.timeDuration ? r.timeDuration.split('-')[0] : r.timeDuration;
      let video = r.video || {};
      let lesson = r.lesson || {};
      if (r.classify === 'OnlineLesson') {
        video = {
          address: '',
          cover: r.lessonPhoto
        };
        lesson = {
          teacher: {
            username: r.teacherName,
            profilePhoto: r.teacherPhoto
          }
        };
      }

      return {
        ...r,
        week:
          r.issueDate && !isNaN(dayjs(r.issueDate))
            ? '周' + ['日', '一', '二', '三', '四', '五', '六'][dayjs(r.issueDate).weekday()] + ` ${timeDuration}`
            : r.issueDate,
        video,
        lesson
      };
    });
    if (reset) {
      ajax.list.splice(0, ajax.list.length, ...list);
    } else {
      ajax.list.push(...list);
    }
  };
  const getTimeStatus = datetime => {
    const currentTime = new Date();
    const targetTime = new Date(datetime);
    if (targetTime < currentTime) {
      return 'past'; // 过去
    } else if (targetTime > currentTime) {
      return 'future'; // 未来
    } else {
      return 'present'; // 现在
    }
  };

  // 触发子组件更新事件
  const sonChange = ({ type, sort }) => {
    if (type == 'scrollDown') {
      params.currentPage++;
      httpMineLessons();
    } else if (type === 'search') {
      params.currentPage = 1;
      httpMineLessons(true);
    } else if (type === 'sort') {
      params.currentPage = 1;
      params.sort = sort;
      httpMineLessons(true);
    }
  };
  defineExpose({ sonChange });
</script>

<style lang="scss" scoped>
  .list {
    margin: 0 26rpx;
    &-item {
      width: 100%;
      background-color: #393939;
      padding: 28rpx 33rpx 35rpx 30rpx;
      box-sizing: border-box;
      border-radius: 21rpx;
      margin-bottom: 9rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      &-lesson {
        &-title {
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 45rpx;
          line-height: 45rpx;
        }
        &-text {
          width: 157rpx;
          font-size: 35rpx;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &-grade {
          width: 148rpx;
          height: 42rpx;
          font-size: 24rpx;
          font-weight: bold;
          background-color: #ff7a66;
          border-radius: 66rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &-info {
          margin-top: 17rpx;
          color: #b1b1b1;
        }
      }

      &-time {
        position: relative;
        &-data {
          text-align: right;
          font-size: 28rpx;
          color: #fff;
        }
        &-begin {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 215rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          background-color: #959595;
          border-radius: 42rpx;
          font-size: 24rpx;
          color: #b1b1b1;
        }
      }
    }
  }
  .curriculum {
    display: flex;
    // height: 100%;
    overflow: hidden;
    padding-bottom: 105rpx;
    padding-top: 30rpx;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;

    .empty {
      color: #808080;
      font-size: 26rpx;
      width: 100%;
      margin: 0 26rpx;
      &-text {
        text-align: center;
        margin-top: 80rpx;
        border-bottom: 1px solid #545454;
        padding-bottom: 49rpx;
      }
    }
    &-item {
      width: 49%;
      border-radius: 4px;
      position: relative;
      margin-bottom: 49rpx;
      padding-left: 17rpx;
      box-sizing: border-box;
    }
    .item {
      display: flex;
      border-top: 1px solid #535353;
      padding: 5px 0.5451rem;
      box-sizing: border-box;

      &-info {
        font-size: 1.0901rem /* 20px -> 1.0901rem */;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 1.0901rem /* 20px -> 1.0901rem */;
        &-week {
          margin-bottom: 9rpx;
        }
        &-date {
          font-size: 0.7631rem /* 14px -> .7631rem */;
          color: #959595;
        }
      }
      &-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.8176rem /* 15px -> .8176rem */;
        &-image {
          display: flex;
          align-items: flex-start;
          .image {
            border-radius: 0.436rem !important;
            overflow: hidden !important;
            margin-right: 9rpx;
          }
        }
      }
    }
  }
</style>
